<template>
  <view
    class="list-bg addressbar-user"
    @click="editAddressFn"
  >
    <image class="img" src="/static/image/location.png" />
    <template v-if="shoppingAddList && shoppingAddList.length > 0">
      <view class="name">
        <image v-if="shippingAddressModel.is_default == 1" class="default-icon" :src="vuex_imgPath+'/default.png'" />
        <image
          v-if="shippingAddressModel.limitLine == 10"
          class="default-icon"
          src="/ycPayments/static/image/traffic_restriction_icon.png"
        />
        <text>{{ shippingAddressModel.provinceName || '' }} {{ shippingAddressModel.cityName || '' }} {{ shippingAddressModel.areaName || '' }} </text>
      </view>
      <view class="area">{{ shippingAddressModel.streetName || '' }}{{ shippingAddressModel.detail_address || '' }}</view>
      <view v-if="shippingAddressModel.addressPersonList.length>0" class="name">
        <text>{{ shippingAddressModel.addressPersonList[0].receiverName || '' }}</text>
        <text class="number">{{ shippingAddressModel.addressPersonList[0].mobile || '' }}</text>
      </view>
    </template>
    <template v-else>
      <view
        class="add-address"
      >
        添加收货地址
      </view>
    </template>
    <text v-if="showRightIcon" class="right-icon font_family icon-a-arrowright_tongyong_2" />
  </view>
</template>

<script>
export default {
  name: 'AddressBar',
  props: {
    addressData: {
      type: Object,
      default: undefined
    },
    addressList: {
      type: [Array, Object],
      default: undefined
    },
    showRightIcon: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    shippingAddressModel() {
      return this.addressData
    },
    shoppingAddList() {
      return this.addressList
    }
  },
  methods: {
    editAddressFn() {
      this.$emit('editAddressFn')
    }
  }
}
</script>
<style scoped lang="scss">
.addressbar-user{
  background:$uni-bg-color url("../../static/image/dash_line.png") repeat-x 0 bottom/auto 22rpx;
  position: relative;
  padding:20rpx 15rpx 15rpx 98rpx;
  line-height: 34rpx;
  .add-address{
    height: 126rpx;
    line-height: 126rpx;
    font-size: $uni-font-size-base;
  }
  .img{
    width: 48rpx;
    height: 50rpx;
    position: absolute;
    top:50%;
    left: 20rpx;
    margin-top:-25rpx;
  }
  .name{
    .default-icon{
      width: 56rpx;
      height: 32rpx;
      display: inline-block;
      float: left;
      margin-right: 8rpx;
    }
    .number{
      margin-left: 20rpx;
    }
  }
  .right-icon{
    font-size:$uni-font-size-lg;
    color: $uni-text-color;
    position: absolute;
    top: 50%;
    right: 32rpx;
    margin-top: -16rpx;
  }
  .area{
    margin-top:8rpx;
    padding-right: 50rpx;
    font-size:$uni-font-size-base;
    font-weight: bold;
  }
}
</style>
